<template>
  <div style="1px solid black">
    <div><h1 align="center">投诉通道</h1></div>
    <div style="margin-left: 30%">
      <div>
        <label style="font-size: 20px">位 置:</label>
        <div class="el-icon-location-outline" @click="getPosition">
          <label>{{ address }}</label>
          <myMap ref="myMap" id="myMap" hidden></myMap>
        </div>
      </div>
      <div style="margin-top: 3%">
        <div>
          <label style="font-size: 20px">问题类型:</label>
          <el-select v-model="type" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.type"
              :label="item.type"
              :value="item.type"
            >
            </el-option>
          </el-select>
        </div>
        <div style="margin-top: 3%">
          <label style="font-size: 20px">投诉照片:</label>
          <el-upload
            class="avatar-uploader"
            action="http://localhost:5051/image/upload"
            :show-file-list="false"
            :on-success="handleComplainImage"
            style="margin-left: 3%; margin-top: 5%"
          >
            <img v-if="complain_image" :src="complain_image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>
        <div style="margin-top: 3%">
          <label style="font-size: 20px">投诉内容:</label><br />
          <textarea
            cols="60px"
            rows="6"
            v-model="content"
            style="font-size: 15px"
          ></textarea>
        </div>
        <div>
          <button
            type="submit"
            style="width: 100px; height: 50px; font-size: 20px"
            @click="complain"
          >
            投诉
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
import myMap from "../../../components/myMap.vue";
import commons from "../../../assets/commons";
// import refresh from '../../../components/refresh';
export default {
  // inject: ["reload"],
  data() {
    return {
      address: "",
      complain_image: "",
      options: [
        {
          type: "犬只扰民",
          label: "犬只扰民",
        },
        {
          type: "违规养犬",
          label: "违规养犬",
        },
        {
          type: "流浪犬",
          label: "流浪犬",
        },
        {
          type: "其他",
          label: "其他",
        },
      ],
      type: "",
      content: "",
    };
  },
  methods: {
    getPosition() {
      window.console.log(this.$refs.myMap.$data);
      this.address = this.$refs.myMap.$data.address;
    },

    handleComplainImage(res, file) {
      console.log(res);
      this.complain_image = res.data;
    },
    complain() {
      let complain = {
        address: this.address,
        type: this.type,
        photo: this.complain_image,
        content: this.content,
        cdate: new Date(),
        u_id:this.$store.state.person.id
      };
      console.log(complain);
      axios
        .post(commons.baseUrl + "user/complain/addComplain", complain)
        .then((res) => {
          console.log(res);

          if (res.data.code == 200) {
            this.$message(res.data.message);
            this.address = "";
            this.complain_image = "";
            this.options.type = "";
            this.content = "";
          }
        });
      // this.$router.go(0);
      // 直接调用;
      // this.reload();
    },
  },
  mounted() {
    this.getPosition();
  },
  computed: {},
  // 注册组件
  components: {
    myMap,
    // refresh,
  },
};
</script>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #fffbfb;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 150px;
  display: block;
}
</style>
